// 引入依赖脚本
import * as echarts from "../../../ec-canvas/echarts";
// chart实例
let chart = null;
Page({

    /**
     * 页面的初始数据
     */
    data: {
        swiperImgs: [
            "https://seopic.699pic.com/photo/50035/7265.jpg_wh1200.jpg",
            "https://seopic.699pic.com/photo/40173/3237.jpg_wh1200.jpg",
            "https://seopic.699pic.com/photo/50035/0659.jpg_wh1200.jpg"
        ],
        popShow: false, //底部弹窗显示
        treeList: [
            {
                tree_id: "1",
                tree_name: "A厂",
                children: [
                    {
                        tree_id: "1_1",
                        tree_name: "A厂-车间1",
                        children: [
                            {
                                tree_id: "1_1_1",
                                tree_name: "A厂-车间1-设备1",
                                children: []
                            },
                            {
                                tree_id: "1_1_2",
                                tree_name: "A厂-车间1-设备2",
                                children: []
                            }
                        ]
                    },
                    {
                        tree_id: "1_2",
                        tree_name: "A厂-车间2",
                        children: [
                            {
                                tree_id: "1_2_1",
                                tree_name: "A厂-车间2-设备1",
                                children: []
                            },
                            {
                                tree_id: "1_2_2",
                                tree_name: "A厂-车间2-设备2",
                                children: []
                            }
                        ]
                    }
                ]
            },
            {
                tree_id: "2",
                tree_name: "B厂",
                children: [
                    {
                        tree_id: "2_1",
                        tree_name: "B厂-车间1",
                        children: [
                            {
                                tree_id: "2_1_1",
                                tree_name: "B厂-车间1-设备1",
                                children: []
                            },
                            {
                                tree_id: "2_1_2",
                                tree_name: "B厂-车间1-设备2",
                                children: []
                            }
                        ]
                    },
                    {
                        tree_id: "2_2",
                        tree_name: "B厂-车间2",
                        children: [
                            {
                                tree_id: "2_2_1",
                                tree_name: "B厂-车间2-设备1",
                                children: []
                            },
                            {
                                tree_id: "2_2_2",
                                tree_name: "B厂-车间2-设备2",
                                children: []
                            }
                        ]
                    }
                ]
            }
        ],
        ec: {
            lazyLoad: true // 延迟加载
        },
        x_list: [],
        y_list: []
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.echartsComponent = this.selectComponent("#mychart");
        this.getEchartData(); //获取数据
    },
    /**
     * 选择点位
     */
    showPop: function() {
        this.setData({
            popShow: true
        })
    },
    closePop: function() {
        this.setData({
            popShow: false
        })
    },
    cancel() {
        console.log("返回");
        this.setData({
            popShow: false
        })
    },
    confirm(e) {
        console.log("确定:id", e.detail);
        this.setData({
            popShow: false
        })
    },
 
    getEchartData: function() {
        // 模拟接口
        const that = this;
        setTimeout(function() {
            that.setData({
                x_list: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                y_list: [1,2,3,4,5,6,7]
            });
            // 如果是第一次绘制
            if (!chart) {
                that._initEcharts(); //初始化图表
            } else {
                that._setOption(chart); //更新数据
            }
        }, 1000);
    },
    /**
     * 初始化图表
     */
    _initEcharts: function() {
        this.echartsComponent.init((canvas, width, height) => {
            // 初始化图表
            chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            this._setOption(chart);
            // 注意： 这里一定要返回chart实例，否则会影响时间处理等
            return chart;
        })
    },
    _setOption: function(chart) {
        chart.clear(); //清除
        chart.setOption(this._getOption()); //获取新数据
    },
    _getOption: function() {
        // 指定图表的配置项和数据
        var option = {
            grid: {
                top: "5%",
                left: "5%",
                right: "5%",
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: this.data.x_list
            },
            yAxis: {
              type: 'value'
            },
            series: [{
                data: this.data.y_list,
                type: 'line'
            }]
        }
        return option;
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})